import React, { Component, Suspense } from "react";
import { formatMessage } from 'umi-plugin-react/locale';
import { connect } from "dva";
import PageHeaderWrapper from "@/components/PageHeaderWrapper";
import PageLoading from "@/components/PageLoading";
import { List, Button, Card, Form, Input, message, Select, Spin, Tag, Icon, Modal, Tooltip } from "antd";
import moment from "moment";
import styles from "./index.less";
import { getSensitiveList, getSensitiveRemove } from '@/services/secureRejection';
import AddRejection from "./add";

class RejectionList extends Component {
    constructor(props) {
        super(props);
        this.state = {
            list: [],
            total: 0,
            queryData: {
                search: '',
                current: 1,
                size: 16,
            }
        }
    };

    componentDidMount() {
        if (this.props.onRef) {
            this.props.onRef(this);
        };
        this.getList();
    }

    getList = async () => {
        const { queryData } = this.state;
        const { categoryId } = this.props;
        let obj = {
            ...queryData,
            categoryId,
            type: '0',
        };
        let res = await getSensitiveList(obj);
        console.log(res);
        this.setState({ list: res.records, total: res.total });
    }

    queryByPage = () => {
        let { queryData } = this.state;
        let userInfo = this.props.form.getFieldsValue();
        console.log(userInfo);
        queryData.current = 1;
        queryData.search = userInfo.search;
        this.setState({ queryData }, () => this.getList())
    }

    fenye = (page) => {
        let { queryData } = this.state;
        queryData.current = page;
        this.setState({ queryData }, () => this.getList());
    };

    rejectionAdd = () => {
        if (this.addRejectionRef) {
            this.addRejectionRef._init_(null);
        }
    }

    editRejections = row => {
        if (this.addRejectionRef) {
            this.addRejectionRef._init_(row);
        }
    }

    delRejection = id => {
        Modal.confirm({
            content: formatMessage({ id: 'largeModelCenter.secureRejection.questionRejection.list.confirmDelete' }),
            okText: formatMessage({ id: 'largeModelCenter.secureRejection.questionRejection.list.delete' }),
            okType: 'danger',
            cancelText: formatMessage({ id: 'largeModelCenter.secureRejection.questionRejection.list.cancel' }),
            maskStyle: { zIndex: 99999 },
            zIndex: 999999,
            onOk: async () => {
                let res = await getSensitiveRemove({ id, type: '0' });
                console.log(res);
                if (res.code === 0) {
                    message.success('操作成功');
                    this.getList();
                }
            },
            onCancel() {
                console.log('Cancel');
            },
        });
    }

    render() {
        const { list, total, queryData } = this.state;
        const { categoryList, categoryId } = this.props;
        const { getFieldDecorator } = this.props.form;

        return (
            <div style={{ paddingRight: 12 }}>
                <div className={styles['rejection-flex']} style={{ marginBottom: 20 }}>
                    <Form layout="inline">
                        <Form.Item>
                            {getFieldDecorator("search")(<Input placeholder={formatMessage({ id: 'largeModelCenter.secureRejection.questionRejection.list.searchPlaceholder' })} style={{ width: '240px' }} />)}
                        </Form.Item>
                        <Form.Item>
                            <Button type="primary" onClick={this.queryByPage}>{formatMessage({ id: 'largeModelCenter.secureRejection.questionRejection.list.query' })}</Button>
                        </Form.Item>
                    </Form>
                    <Button type="primary" onClick={this.rejectionAdd}>{formatMessage({ id: 'largeModelCenter.secureRejection.questionRejection.list.addSensitiveWord' })}</Button>
                </div>
                <List
                    rowKey='id'
                    pagination={{
                        onChange: (page) => this.fenye(page),
                        current: queryData.current,
                        pageSize: 16,
                        total: parseInt(total),
                        showQuickJumper: true,
                    }}
                    grid={{ gutter: 16, column: 4 }}
                    dataSource={list}
                    renderItem={(item) => (
                        <List.Item key={item.id}>
                          <Card hoverable className={styles.cardOutBox} bordered={false} bodyStyle={{padding:18}}>
                            <div className={styles.cardBox} style={{display:"block"}}>
                              <div className={`${styles['rejection-flex']} ${styles['m-b-10']}`}>
                                <Tooltip title={item.content} placement="bottom">
                                  <span className={`${styles['rejection-ellipsis']}`} style={{ fontSize: '16px', WebkitBoxOrient: 'vertical', }}>{item.content}</span>
                                </Tooltip>
                              </div>
                              <div className={styles['rejection-flex']}>
                                  

                                  <span style={{ fontSize: '18px' }}>
                                      <Icon type="form" style={{ marginRight:8 }} onClick={() => this.editRejections(item)} />
                                      <Icon type="delete" onClick={() => this.delRejection(item.id)} />
                                  </span>
                                  <span style={{ display: 'flex', gap: '10px', alignItems: 'center' }}>
                                      <Icon type="warning" theme="filled" style={{ fontSize: '18px', color: '#faad14' }} />
                                      <span>{item.count}</span>
                                  </span>
                              </div>
                            </div>
                            
                          </Card>
                        </List.Item>
                    )}
                />
                <AddRejection
                    onRef={ref => this.addRejectionRef = ref}
                    getList={this.getList}
                    categoryId={categoryId}
                    categoryList={categoryList}
                />
            </div>
        );
    }
}

export default connect(({ user }) => ({
    currentUser: user.currentUser,
}))(Form.create()(RejectionList));
